<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>秒表</title>
    <style>
        /*@keyframes tick3 {
            0%          { --timer-content:"2";content: var(--timer-content) }
            33.3333%    { --timer-content:calc(var(--timer-content) - 1);content: var(--timer-content) }
            66.6667%    { --timer-content:calc(var(--timer-content) - 1);content: var(--timer-content) }
            100%        { --timer-content:calc(var(--timer-content) - 1);content: var(--timer-content) }
        }*/
        /*@keyframes tick3 {
            0%          { --timer-content2:2;--timer-content:calc(var(--timer-content2) *1px);content: var(--timer-content) }
            33.3333%    { --timer-content2:1;--timer-content:calc(var(--timer-content2) *1px);content: var(--timer-content) }
            66.6667%    { --timer-content2:0;--timer-content:calc(var(--timer-content2) *1px);content: var(--timer-content) }
            100%        { --timer-content2:2;--timer-content:calc(var(--timer-content2) *1px);content: var(--timer-content) }
        }*/
        @keyframes tick3 {
            0%          { content: "2" }
            33.3333%    { content: "1" }
            66.6667%    { content: "0" }
            100%        { content: "2" }
        }
        @keyframes tick6 {
            0%          { content: "5" }
            16.6667%    { content: "4" }
            33.3333%    { content: "3" }
            50%         { content: "2" }
            66.6667%    { content: "1" }
            83.3333%    { content: "0" }
            100%        { content: "5" }
        }

        @keyframes tick10 {
            0%      { content: "9" }
            10%     { content: "8" }
            20%     { content: "7" }
            30%     { content: "6" }
            40%     { content: "5" }
            50%     { content: "4" }
            60%     { content: "3" }
            70%     { content: "2" }
            80%     { content: "1" }
            90%     { content: "0" }
            100%    { content: "9" }
        }

        @keyframes hide {
            from {visibility: visible;}
            to {visibility: hidden;}
        }

        @keyframes show {
            from {visibility: hidden;}
            to {
                visibility: visible;
                content: "It's timeout now.";
            }
        }
        @keyframes blink {
            from {color: red;}
            to {color: transparent;}
        }

        body {
            overflow: hidden;
        }

        .container {
            text-align: center;
        }

        .message-container {
            position: relative;
        }

        .digit-board {
            position: relative;
            height: 2rem;
            overflow: hidden;
            animation: hide 1ms 18s forwards;
        }

        .timeout {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
        }

        .timeout:before {
            content: "";
            animation: show 1ms 18s forwards, blink 1.2s 18s both infinite;
        }

        .minute, .second, .centi-second {
            display: inline-block;
            vertical-align: text-top;
        }

        .minute:before, .second:before, .centi-second:before {
            display: block;
            height: 2rem;
            content: "";
            animation: tick6 1s step-end;
        }

        .minute:before, .second:before {
            animation-timing-function: steps(6, end);
        }

        .second + .second:before, .centi-second:before {
            animation: tick10 1s step-end;
        }

        .minute:before {
            /*content: "3";*/
            --timer-content: 3;
            animation: tick3 18s step-end;
            animation-duration: 18s;

            /*animation: none;*/
            /*content: '22'"d";*/
        }

        .minute + .minute:before {
            animation: tick10 6s 3 step-end;
            /*animation-iteration-count: 3;*/
            /*animation-duration: 6s;*/
        }

        .second:before {
            animation-iteration-count: calc(3 * 10);
            animation-duration: 0.6s;
        }

        .second + .second:before {
            animation-iteration-count: calc(3 * 60);
            animation-duration: 0.1s;
        }

        .centi-second:before {
            animation-iteration-count: calc(3 * 600);
            animation-duration: 10ms;
        }

        .centi-second + .centi-second:before {
            animation-iteration-count: calc(3 * 6000);
            animation-duration: 1ms;
        }
    </style>
</head>
<body>
<div class="container">
    <div>
        时间流速*100倍，方便查看效果
    </div>
    <br>
    <div class="message-container">
        <div class="digit-board">
            <span class="minute"></span>
            <span class="minute"></span>
            :
            <span class="second"></span>
            <span class="second"></span>
            &nbsp;
            <span class="centi-second"></span>
            <span class="centi-second"></span>
            <span>'</span>
        </div>
        <div class="timeout"></div>
    </div>
</div>
</body>
</html>